<template>
  <div class="coupon">
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">会议室管理</div>
        <div class="add">
          <el-button type="success" @click="addCoupon">添加会议室</el-button>
          <el-input
            @input="getMeetingList"
            v-model="pageparm.name"
            placeholder="请输入"
            style="width: 250px; "
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table size="mini" :data="tableData">
          <el-table-column type="index" align="center" label="">
          </el-table-column>
          <el-table-column prop="img" align="center" width="100" label="图片">
            <template slot-scope="scope">
              <el-image style="width: 40px; height: 40px;" :src="scope.row.img">
                <div slot="error" class="image-slot">
                  <el-image :src="require('../../assets/img/lolo.png')">
                  </el-image>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            width="250"
            label="会议室名"
          ></el-table-column>
          <el-table-column
            prop="sort"
            width="180"
            align="center"
            label="排序"
          ></el-table-column>
          <el-table-column
            prop="capacity"
            width="180"
            align="center"
            label="容纳人数"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
          ></el-table-column>
          <el-table-column prop="roleName" align="center" label="会议室开关">
            <template slot-scope="scope">
              <el-switch
                @change="updateState(scope.row)"
                v-model="scope.row.state"
                active-value="1"
                inactive-value="0"
              ></el-switch>
              <span style="margin-left: 10px;">
                {{ scope.row.state ? "开" : "关" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="280"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="updateCurrentCoupon(scope.row.id)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>

    <!-- 新增 编辑会议室 -->
    <el-dialog
      :title="currentFlag == 1 ? '新增会议室' : '编辑会议室'"
      :visible.sync="addCouponShow"
      width="700px"
      top="50px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="会议室名：" prop="name">
          <el-input v-model="ruleForm.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input
            v-model="ruleForm.sort"
            type="number"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="会议室图片：" prop="img">
          <template>
            <upload-img
              :isShowTip="false"
              :limit="1"
              :value="ruleForm.img"
              @input="uploadImgBack($event)"
            />
            <span style="color: red;">提示：</span>
            <span style="color: #999;"
              >默认会议室封面是鹏城测试logo，如需更改，请删除后重新上传。</span
            >
          </template>
        </el-form-item>
        <el-form-item label="容纳人数：" prop="capacity">
          <el-input
            v-model="ruleForm.capacity"
            type="number"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="预约时间段：">
          <el-select
            v-model="ruleForm.timeInterval"
            multiple
            placeholder="请选择"
            style="width: 90%;"
          >
            <el-option
              v-for="item in timePeriodOptions"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址：" prop="address">
          <el-input
            v-model="ruleForm.address"
            size="small"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCouponShow = false">取 消</el-button>
        <el-button @click="submitAuthority('ruleForm')" type="primary">{{
          currentFlag == 0 ? "编辑" : "新增"
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import uploadImg from "../../components/uploadImg";

import {
  addMeeting,
  getMeetingList,
  getMeetingInfo,
  updateMeeting,
  setMeetingState
} from "../../api/meeting";
import { timePeriodData } from "./timePeriodData";
export default {
  data() {
    return {
      addCouponShow: false,
      currentFlag: 0,
      ruleForm: {
        id: null,
        name: "", //名称
        sort: "",
        img: [{ url: "http://applet.atptest.com/RtTk5Oca1682497720771.png" }],
        capacity: "",
        address: "",
        timeInterval: []
      },
      timePeriodOptions: timePeriodData,
      checkedGroup: [],
      couponList: [],
      list: [],
      userList: [],
      rules: {
        name: [
          { required: true, message: "请输入会议室名称", trigger: "blur" }
        ],
        sort: [{ required: true, message: "请输入排序值", trigger: "blur" }],
        capacity: [
          { required: true, message: "请输入容纳人数", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入会议室地址", trigger: "blur" }
        ]
      },
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total:0,
        name: ""
      },
      //优惠券请求搜索条件
      pageparmCoupon: {
        pageIndex: 1,
        pageSize: 999,
        searchKey: ""
      },
      tableData: []
    };
  },
  name: "coupon",
  components: {
    Pagination,
    uploadImg //上传图片
  },

  created() {
    this.getMeetingList();
  },

  methods: {
    //获取会议室列表
    async getMeetingList() {
      const res = await getMeetingList(this.pageparm);
      if (res.code == 200) {
        if (res.data) {
          let { items, totalCount } = res.data;
          this.tableData = items;
          this.pageparm.total = totalCount;
          this.tableData.forEach(item => {
            item.state = item.state.toString();
          });
        } else {
          this.tableData = [];
        }
      } else {
        this.tableData = [];
        this.$message.error(res.message);
      }
    },

    // 查询会议室名字
    inputSearch(val) {
      this.pageparm.searchKey = val;
      this.pageparm.pageIndex = 1;
      this.getMeetingList();
    },

    //开关控制
    updateState(r) {
      this.$confirm(`确认${r.state == "1" ? "打开" : "关闭"}吗? `, "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          setMeetingState({
            state: r.state,
            id: r.id
          }).then(res => {
            if (res.code == 200) {
              this.$message.success(`已${r.state == "1" ? "打开" : "关闭"}`);
              this.getMeetingList();
            }else{
              this.getMeetingList();
            }
          });
        })
        .catch(action => {
          this.$message.info("取消操作");
          this.getMeetingList();
        });
    },

    // 新增会议室
    addCoupon() {
      this.addCouponShow = true;
      this.currentFlag = 1;
      this.ruleForm = {
        name: "", //名称
        sort: "",
        img: [{ url: "http://applet.atptest.com/RtTk5Oca1682497720771.png" }],
        capacity: "",
        address: "",
        timeInterval: []
      };
      this.$nextTick(() => {
        this.$refs["ruleForm"].resetFields();
      });
    },

    //确认提交
    submitAuthority(ruleForm) {
      this.$refs[ruleForm].validate(valid => { 
        if (valid) {  
          if (this.ruleForm.img instanceof Array) {
            this.ruleForm.img = this.ruleForm.img[0].url;
          }
          if(this.ruleForm.timeInterval.length <= 0){
            this.$message.error("请设置预约时间段")
            return
          }
          this.ruleForm.capacity = Number(this.ruleForm.capacity);
          this.ruleForm.sort = Number(this.ruleForm.sort);
          for (let i = 0; i < this.ruleForm.timeInterval.length; i++) {
            for (let j = 0; j < timePeriodData.length; j++) {
              if (this.ruleForm.timeInterval[i] == timePeriodData[j].label) {
                this.ruleForm.timeInterval[i] = {
                  id: timePeriodData[j].id,
                  value: timePeriodData[j].label,
                  state: 0
                };
              }
            }
          }
          // 新增
          if (this.currentFlag == 1) {
            addMeeting(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success("新增成功");
                this.addCouponShow = false;
                this.getMeetingList();
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            //编辑
            updateMeeting(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success("编辑成功");
                this.addCouponShow = false;
                this.getMeetingList();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    //获取详情
    async updateCurrentCoupon(id) {
      this.ruleForm.id = id;
      let res = await getMeetingInfo({ id });
      if (res.code == 200 && res.data) {
        this.currentFlag = 0;
        this.addCouponShow = true;
        this.ruleForm = res.data;
        this.ruleForm.timeInterval = this.ruleForm.timeInterval.map((item) => {
          return item.value
        });
      } else {
        this.$message.error(res.message);
      }
    },

    // 上传图片的回调
    uploadImgBack(x) {
      if (x && x.length > 0) this.ruleForm.img = x[0].url;
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this.getMeetingList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 80vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
  .title {
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    margin-bottom: 10px;
  }
  .add {
    .el-input {
      margin-left: 20px;
    }
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .active {
    color: green !important;
  }
}
.el-input {
  max-width: 300px !important;
}
input {
  text-align: center;
  border-radius: 5px;
  width: 40px;
  height: 25px;
  outline: none;
  margin: 0 10px;
  border: 1px solid #ccc;
}
</style>
